<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>00_引入</title>
</head>
<body>

<button>测试1</button>
<button>测试2</button>
<button>测试3</button>
<!--
需求: 点击某个按钮, 提示"点击的是第n个按钮"
-->
<script type="text/javascript">
  var btns = document.getElementsByTagName('button')
  //有问题
  // for(var i=0; i < btns.length; i++) {
  //   var btn = btns[i]
  //   btn.onclick = function () {
  //     alert('第'+(i)+'个')
  //   }
  // }


  //解决一: 保存下标
  /*for(var i=0,length=btns.length;i<length;i++) {
    var btn = btns[i]
    btn.index = i
    btn.onclick = function () {
      alert('第'+ this.index +'个')
    }
  }*/

  //解决办法: 利用闭包
  for(var i=0,length=btns.length;i<length;i++) {
    (function (i) {
      var btn = btns[i]
      btn.onclick = function () {
        alert('第'+ i +'个')
      }
    })(i)
  }
</script>
</body>

</html>